<template>
  <div class="classify app-container">
    <div class="my-tabs">
      <div class="tabs-item" :class="{ active: activeTabs === 1 }" @click="changeTabs(1)">
        <p>自定义系统分类</p>
        <span>商城系统上架商品分类配置</span>
      </div>
      <div class="tabs-item" :class="{ active: activeTabs === 2 }" @click="changeTabs(2)">
        <p>
          待审核-分类
          <el-tag :type="'danger'" round> {{ approvaingNum }} </el-tag>
        </p>
        <span>终端商家提交的分类等待审批</span>
      </div>
    </div>

    <div class="content">
      <div v-show="activeTabs === 1"><Custom></Custom></div>
      <div v-show="activeTabs === 2"><Approvaing @adopt="adopt"></Approvaing></div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import Custom from "./components/Custom";
import Approvaing from "./components/Approvaing";

const activeTabs = ref(1);
const approvaingNum = ref(0);

const changeTabs = val => {
  activeTabs.value = val;
};

const adopt = num => {
  console.log("待审核的数据条数===", num);
  approvaingNum.value = num;
};
</script>

<style scoped lang="scss">
p {
  margin: 0;
}
.classify {
  height: 100%;
}
.my-tabs {
  display: flex;
  position: absolute;
  .tabs-item {
    width: 282px;
    height: 64px;
    padding: 10px 20px;
    // border: 1px solid #eee;
    border-bottom: none;
    border-radius: 12px 12px 0 0;
    background-color: #f5f7fa;
    cursor: pointer;
    font-size: 12px;
    color: #86909c;
    p {
      font-size: 16px;
      color: #131414;
      line-height: 24px;
      display: flex;
      justify-content: space-between;
      .el-tag {
        height: 20px;
      }
    }
    &:first-of-type {
      margin-right: 20px;
    }
    &.active {
      background-color: white;
      box-shadow: 0px -5px 16px 0px rgba(4, 19, 74, 0.04);
    }
  }
}
.content {
  background-color: white;
  padding: 32px 20px;
  box-shadow: 0px -5px 16px 0px rgba(4, 19, 74, 0.04);
  margin-top: 64px;
}
</style>
